<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<style>
			.top_context{
				padding: 100px;
				text-align: center;
				line-height: 100px;
			}
			.sticky_element{
				height: 20px;
				text-align: center;
				line-height: 20px;
				background-color: black;
				color: #ffffff;
			}
			.main_contex{
				height: 8000px;
				background-color: #e0e0e0;
			}
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
		//ready()事件源语法：$(document).ready()
		//   简写：$(function(){})
		//总结：页面元素全部加载完毕，在执行JQ相关操作
		//script元素放在最后一个body位置【可不写】
		$(function(){
			//吸顶灯效果---【了解】BOM案例：浏览器6个
			//固定值：页面顶部到吸顶灯位置--BOM语法
			//offset() 获取或者设置元素相对于文档偏移量
			//offset().top 从顶部到吸顶灯元素的偏移量
			var se=$(".sticky_element").offset().top;
			
			//滚动值：BOM对象+事件源
			//$(window)抓取页面对象，监视窗口事件：窗口改变，滚动
			$(window).scroll(function(){
				//滚动值：获取页面滚动的位置
					//scrollTop()获取页面滚动垂直距离
				var st=$(window).scrollTop();
					
					//判断 固定值大于滚动值，滚动超过200 实现切换：吸顶效果
				if(se>st){
					//条件成立
					$(".sticky_element").addClass("sticky");
				}else{
					条件不成立
					$(".sticky_element").removeClass("sticky");
				}
			});
		
		});
		</script>
		
	</head>
	<body>
		<div class="top_context">顶部内容区域</div>
		
		<div class="sticky_element">我是吸顶元素</div>
		
		<div class="main_contex">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque illo aliquam quae fugiat commodi ipsa. Illo harum dicta excepturi exercitationem ut nulla, fuga natus. Dolores excepturi provident repellendus id assumenda. ; Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequatur velit quae repellendus incidunt iusto molestias, dolorem enim non harum eligendi autem at! Explicabo eos, pariatur ut nulla aperiam aut. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta omnis ullam quaerat necessitatibus rerum consequuntur illo, neque tempore distinctio nisi, ducimus tempora voluptate error doloribus delectus quod sequi, deleniti ratione.</div>
		
	</body>
</html>

